<template>
	<!-- 赚取积分 -->
	<view class="earn-points">
		<user-info :showMiddle="false"></user-info>
		<view class="navbar">
			<view @click="changeIndex(0)" class="item" :class="index == 0 ? 'active' : ''">日常任务</view>
			<view @click="changeIndex(1)" class="item" :class="index == 1 ? 'active' : ''">新手任务</view>
		</view>
		<view class="content">
			<view class="list daily-list" v-if="index == 0">
				<view class="item">
					<view class="iconfont icon-denglu"></view>
					<text class="name">登录送积分</text>
					<text class="tips">每天登录一次赠送2积分</text>
				</view>
			</view>
			<view class="list new-list" v-else>
				<view class="item">
					<view class="name">
						会员注册<text>+10</text>
					</view>
					<view class="btn">
						已完成
					</view>
				</view>
				<view class="item">
					<view class="name">
						上传头像<text>+2</text>
					</view>
					<view class="btn">
						已完成
					</view>
				</view>
				<view class="item">
					<view class="name">
						绑定手机<text>+20</text>
					</view>
					<view class="btn">
						已完成
					</view>
				</view>
				<view class="item">
					<view class="name">
						绑定邮箱<text>+10</text>
					</view>
					<view class="btn">
						已完成
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import userInfo from "../../components/user-info.vue"
	export default {
		data() {
			return {
				index: 0
			}
		},
		components: {
			userInfo
		},
		methods: {
			changeIndex(index) {
				this.index = index
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #eeeeee;
		.earn-points {
			.navbar {
				background-color: #fff;
				height: rpx(50);
				line-height: rpx(50);
				display: flex;
				text-align: center;
				.item {
					flex: 1;
					color: #aaa;
					border: 1px solid #ddd;
					font-size: rpx(16);
					&.active {
						color: #4bdac3;
						border-color: #4bdac3;
					}
				}
			}
			.content {
				.list {
					margin: rpx($uni-margin-top) rpx($uni-margin-left);
					background-color: #fff;
					border: 1px solid #ddd;
					.item {
						display: flex;
						height: rpx(50);
						line-height: rpx(50);
					}
				}
				.daily-list {
					.item {
						view {
							margin-left: rpx(16);
							font-size: rpx(24);
							color: #ccc;
						}
						.name {
							margin-left: rpx(7);
							font-size: rpx(14);
							color: #888;
						}
						.tips {
							margin-left: rpx(20);
							font-size: rpx(14);
							color: #aaa;
						}
					}
				}
				.new-list {
					.item {
						justify-content: space-between;
						align-items: center;
						font-size: rpx(14);
						&:not(:first-child) {
							border-top: 1px solid #ddd;
						}
						.name {
							margin-left: rpx(27);
							color: #aaa;
							text {
								color: red;
								margin-left: rpx(10);
							}
						}
						.btn {
							margin-right: rpx(16);
							border: 1px solid #ddd;
							border-radius: rpx(6);
							width: rpx(80);
							height: rpx(30);
							line-height: rpx(30);
							text-align: center;
							color: #888;
						}
					}
				}
			}
		}
	}
</style>
